<template>
<div v-if='!orderNumber'>
    <h3>`orderNumber` 不存在</h3>
</div>
<div id="modify-address" v-else>
    <h3 class="modify-address-title">修改地址 - {{orderNumber}}</h3>
    <form class="form-address">
        <label class="selector-label">
            <span class="inp-title">省市区/县</span>
            <my-cascade-selector
                :list='newList' 
                pid='p_city_code' 
                childid='code' 
                name='name'
                level='level' 
                @cascade-event="handleCascadeEvent"
            ></my-cascade-selector>
        </label>
        <my-input 
            title='详细地址' 
            name='detailAdress' 
            v-model="detailAdress"
        ></my-input>
    </form>
    <footer class="modify-address-footer">
        <my-button type='back' link :to='{name: "orderList"}'>取消</my-button>
        <my-button type='save' @click.native="handleClickModifyAddr">确定</my-button>
    </footer>
</div>
</template>

<script>
import { 
    getProvinces, 
    modifyUserState, 
    updateAddr
} from '../../config/data'
import { messageTip } from '../JS'
export default {
    name: 'modifyAddress',
    props: ['orderNumber'],
    data() {
        return {
            cityData: [],
            selectAddr: '',
            detailAdress: '',
        }
    },
    created() {
        if(!this.orderNumber) {
            this.$router.push({name: 'orderList'})
        }
        this.getProvincesData()
    },
    methods: {
        async handleClickModifyAddr() {
            let result = await updateAddr({
                oid: this.orderNumber,
                addr: this.selectAddr + ',' + this.detailAdress
            })
            if(!result.fsBool) {
                messageTip({content: '地址修改失败，请重试'})
                return;
            }
            messageTip({content: '地址修改成功，正在跳往订单列表页...'})
            setTimeout(_ => this.$router.push({name: 'orderList'}), 60)
        },
        handleCascadeEvent(obj) {
            this.selectAddr = obj.selectedText.join(',')
        },
        async getProvincesData() {
            let result = await getProvinces()
            this.cityData = result.data.list
        }
    },
    computed: {
        newList() {
            return this.cityData.map(item => {
                item.level = Number(item.level) - 1
                return item;
            })
        }
    },
}
</script>

<style scoped>
#modify-address {
    height: 100%;
}
.modify-address-title,
.modify-address-footer {
    height: 50px;
    line-height: 50px;
}
.form-address {
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 112px);
    margin-top: 12px;
}
.form-address::-webkit-scrollbar {
    display: none;
}
.selector-label {
    display: flex;
    align-items: center;
}
.inp-title {
    position: relative;
    min-width: 96px;
    height: 34px;
    margin-left: -20px;
    line-height: 34px;
    padding-right: 16px;
    text-align-last: justify;
    white-space: nowrap;
}
.inp-title::after {
    content: "*";
    position: absolute;
    top: 0;
    left: -10px;
    color: red;
}
.modify-address-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modify-address-footer :nth-of-type(1) {
    margin-right: 12px;
}
</style>